<template>
  <div>
    <el-row class="top">
      <el-col :span="15">
          <el-button size="small" type="primary" v-if="perssionButton.indexOf('culue_edit')>-1" @click="add" style="margin-top: 10px;margin-left: 10px"><i class="el-icon-circle-plus">&nbsp;&nbsp;新建线索</i></el-button>
      </el-col>
      <el-col :span="2">
        <el-select size="small" v-model="cucStatus" placeholder="全部线索" @change="serchCuclue" style="width:120px;margin-top: 10px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <span style="color: #D6CCCF"> &nbsp;&nbsp;   &nbsp;&nbsp;</span>
        <span style="color: #667B8F">搜索：</span>
        <el-input clearable size="small" placeholder="请输入公司名" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="serch" @change="serchCuclue" suffix-icon="el-icon-search" style="width: 210px;cursor:pointer;margin-top: 10px"></el-input>
      </el-col>
    </el-row>
    <el-row class="tab">
      <el-table v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" ref="multipleTable" :data="tableData" style="width: 100%" height="510">
        <!--          复选框列-->
        <el-table-column fixed type="selection" width="55">
        </el-table-column>

        <el-table-column fixed prop="cucId" label="编号">
        </el-table-column>

        <el-table-column fixed label="采集内容" width="300">
          <template slot-scope="p">
            {{p.row.cucGather}}&nbsp;{{p.row.cucLinkName}}&nbsp;{{p.row.cucLinkPhone}}
          </template>
        </el-table-column>

        <el-table-column prop="culueEmpid.empName" label="所有者" width="120">
        </el-table-column>

        <el-table-column label="状态" width="120">
          <template slot-scope="c">
            <span v-if="c.row.cucStatus==0">已失效</span>
            <span v-if="c.row.cucStatus==2">未处理</span>
            <span v-if="c.row.cucStatus==1">已处理</span>
          </template>
        </el-table-column>

        <el-table-column prop="cucType" label="分类" width="120">
        </el-table-column>

        <el-table-column prop="customerByCustomId.cusName" label="对应客户" width="140">
        </el-table-column>

        <el-table-column sortable label="提交时间" width="210">
          <template slot-scope="scope">{{ scope.row.cucSubmitTime | formatDate}}</template>
        </el-table-column>

        <el-table-column prop="" label="操作" width="100">
          <template slot-scope="p2">
            <span v-if="p2.row.culueEmpid.employeesId==userId">
              <el-button @click="dis(p2.row)" v-if="perssionButton.indexOf('culue_handling')>-1" title="处理" type="text" class="el-icon-top-right" style="color:black"></el-button>
              <el-button @click="update(p2.row)" v-if="perssionButton.indexOf('culue_edit')>-1" :disabled=dity title="编辑" type="text" class="el-icon-edit" style="color:black"></el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页-->
      <div class="page">
        <el-pagination
          :page-sizes="sizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          :current-page.sync="currPage"
          @current-change="pageChange"
          @size-change="sizeChange">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
export default {
  name: 'CulueChi',
  data: function () {
    return {
      loading: true,
      dity:false,
      tableData: [],
      // 线索分页
      sizes:[10,20,30,40],
      totalSize: 0, //     当前页
      currPage: 1, //     默认第一页
      pageSize: 5, //      页大小
      cucStatus:'', // 下拉框搜索
      serch:'',//输入框搜索
      options: [{
        value: '全部线索',
        label: '全部线索'
      }, {
        value: '1',
        label: '已处理'
      }, {
        value: '2',
        label: '未处理'
      }, {
        value: '0',
        label: '已失效'
      }],
      perssionButton:[],//标识符
      postLevel:'',//是否是一级员工
      deptId:'',
      userId:'',//当前登录人id
    }
  },
  created:function () {
    this.authentication()
    this.userId=JSON.parse(sessionStorage.getItem('user')).employeesId;
    this.pageSize=this.sizes[0]
    this.initButton()
    if(this.$route.path != null && this.$route.query.path != ''){
      this.authentication()
      this.loading=false;
    }
  },
  methods: {
    //验证用户身份
    authentication(){
      var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
      //获取用户是否是一级角色
      this.$axios.get("http://localhost:8088/is_one_Role",{params:{empId:id}})
        .then(v=> {
          if (v.data.postLevel == 1) {//用户是一级角色
            //查询出能看到的部门信息
            if (v.data.deptId == 1) {
              // 查询全部线索
              this.init(this.currPage,this.pageSize,this.cucStatus,this.serch,-1,-1)
            }
            this.postLevel = 1;
          }else{
            // 查询当前登录人的线索
            this.init(this.currPage,this.pageSize,this.cucStatus,this.serch,id,-1)
          }
          this.deptId = v.data.deptId;//记录部门id
        }).catch();
    },
    initButton(){//标识符
      this.perssionButton=JSON.parse(sessionStorage.getItem("button"));
    },
    init(currPage, pageSize,cucStatus,serch,empId,deptId){
      this.$axios.get("http://localhost:8088/vue/select-cuclue",{params:{page: currPage,size: pageSize,cucStatus: cucStatus,serch: serch,empId:empId,deptId:deptId}})
      .then(v=>{
        this.tableData=v.data.rows;
        this.totalSize=v.data.totals
        this.loading=false;
      })
      .catch()
    },
    pageChange(currPage){//切换页码
      this.init(currPage,this.pageSize,this.cucStatus,this.serch)
    },
    sizeChange(pageSize){//页大小改变
      this.init(1,pageSize,this.cucStatus,this.serch)
      this.pageSize=pageSize
    },
    serchCuclue(){
      this.init(1,this.pageSize,this.cucStatus,this.serch)
    },
    add(){//新增按钮
      this.$router.push({
        path:'culueadd'
      })
    },
    update (row) { // 线索编辑按钮
      if(row.cucStatus != 2){
        this.$message.error("该状态线索不可编辑")
      }else {
        this.$router.push({
          path: '/culueadd',
          query: {
            culue: row
          }
        })
      }
    },
    dis (row) { // 处理按钮
      this.$router.push({
        path:'/dispose',
        query:{
          culue: row
        }
      })
    },

  },
  watch:{
    $route(){
      if(this.$route.query.path != null && this.$route.query.path != ''){
        this.authentication()
        this.loading=false
      }
    }
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
  },
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    background: white
  }

  a{
    cursor:pointer;
    text-decoration: none;
    color: black;
  }

  a:active{
    color: #333333;
  }

  .tab{
    border: 1px solid #D3DCE6;
    padding-bottom: 15px;
    background: white;
    min-height: 580px;
  }

  .page{
    margin-top:10px;
    float: right;
    margin-right: 20px;
  }
</style>
